<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
		 <style>
		 	input+span{
		 		color: red;
		 	}
		 </style>
		 <script>
		 	$(function(){
		 		
		 		$("#email").blur(function(){
		 			var e=$(this).val();
		 			if(e.indexOf("@")<1||e.indexOf('.')<1)
					{
						$(this).css("border","1px solid red");
						$(this).next().html("邮箱格式不合法！");
						return false;
					}
					$(this).next().empty();
					$(this).css("border","1px solid black");
					return true;
		 		});
		 		var tc;
		 		$("#email").keydown(function(){
		 			console.log(">>>>>");
		 			if(tc!=null)
		 				window.clearTimeout(tc);
		 				
		 			var p=this;	
		 			tc=window.setTimeout(function(){
		 			$(p).triggerHandler("blur");	
		 			},1500);
		 		});
		 		$("form").submit(function(){
		 			var e=$(":text[name='email']").val();
		 			var p=$(":password[name='pass']").val();
		 			var age=$(":text[name='age']").val();
		 			if(e.indexOf("@")<1||e.indexOf('.')<1)
					{
						alert("邮件格式非法");
						return false;
					}
					if(p.length<6||p.length>10){
						alert("密码长度不合适");
						return false;
					}
					if(age==""||window.isNaN(age)){
						alert("年龄为空或者不是数字");
						return false;
					}
					var len=$(":checkbox[name*=rule]:checked").length;
					if(len==0){
						alert("必须同意用户协议");
						return false;
					}
					return true;	
		 		});
		 	});
		 </script>
	</head>
	<body>
		<form action="2.html" onsubmit="return checkForm(this)">
			<p>
				email:<input type="text" id="email" name="email" placeholder="请按照aa@bb.com的格式"/><span></span>
			</p>
			<p>
				密码:<input type="password" name="pass" />
			</p>
			<p>
				年龄:<input type="text" name="age" placeholder="请输入数字"/>
			</p>
			<p>
				<input type="radio" value="男" name="sex" checked="checked"/>男
				<input type="radio" value="女" name="sex" />女
			</p>
			<p>
				<input type="checkbox" name="confirmrule" value="y"/>请同意我们的用户阅读
			</p>
			<input type="submit" />
		</form>
	</body>
</html>
